<!--<template>
  <div>
    <index-chart v-if="indexStyle==1"></index-chart>
    <index-bdc v-if="indexStyle==2"></index-bdc>
    <index-task v-if="indexStyle==3"></index-task>
    <div style="width: 100%;text-align: right;margin-top: 20px">
      请选择首页样式：
      <a-radio-group v-model="indexStyle">
        <a-radio :value="1">统计图表</a-radio>
        <a-radio :value="2">统计图表2</a-radio>
        <a-radio :value="3">任务表格</a-radio>
      </a-radio-group>
    </div>
  </div>
</template>

<script>
  import IndexChart from './IndexChart'
  import IndexTask from "./IndexTask"
  import IndexBdc from './IndexBdc'

  export default {
    name: "Analysis",
    components: {
      IndexChart,
      IndexTask,
      IndexBdc
    },
    data() {
      return {
        indexStyle:1
      }
    },
    created() {

    },
    methods: {

    }
  }
</script>-->


<template>
  <div class="index-container-ty">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <a-card :loading="loading" :body-style="{ padding: '20px 24px 8px' }" :bordered="false">
          <div class="chart-card-header">
            <div class="meta">
              <span class="chart-card-title">待办任务</span>
              <span class="chart-card-action">
                <slot name="action"></slot>
              </span>
              <a-tooltip title="指标说明" slot="action" style="margin-left: 60%">
                <a-icon type="info-circle-o"/>
              </a-tooltip>
            </div>
            <div class="total" style="color: red"><span>{{ dataSource.length.toString() }}</span></div>
          </div>
          <div class="chart-card-content">
            <div class="content-fix">
              <slot></slot>
            </div>
          </div>
          <div class="chart-card-footer">
            <div class="field">
              <slot name="footer"></slot>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <a-card :loading="loading" :body-style="{ padding: '20px 24px 8px' }" :bordered="false">
          <div class="chart-card-header">
            <div class="meta">
              <span class="chart-card-title">出差次数</span>
              <span class="chart-card-action">
                <slot name="action"></slot>
              </span>
              <a-tooltip title="指标说明" slot="action" style="margin-left: 60%">
                <a-icon type="info-circle-o"/>
              </a-tooltip>
            </div>
            <div class="total" style="color: #52c41a"><span>{{ acteLeaveNum.toString() }}</span></div>
          </div>
          <div class="chart-card-content">
            <div class="content-fix">
              <slot></slot>
            </div>
          </div>
          <div class="chart-card-footer">
            <div class="field">
              <slot name="footer"></slot>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <a-card :loading="loading" :body-style="{ padding: '20px 24px 8px' }" :bordered="false">
          <div class="chart-card-header">
            <div class="meta">
              <span class="chart-card-title">请假次数</span>
              <span class="chart-card-action">
                <slot name="action"></slot>
              </span>
              <a-tooltip title="指标说明" slot="action" style="margin-left: 60%">
                <a-icon type="info-circle-o"/>
              </a-tooltip>
            </div>
            <div class="total" style="color: red"><span>{{ leaveApplicationNum.toString() }}</span></div>
          </div>
          <div class="chart-card-content">
            <div class="content-fix">
              <slot></slot>
            </div>
          </div>
          <div class="chart-card-footer">
            <div class="field">
              <slot name="footer"></slot>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <a-card :loading="loading" :body-style="{ padding: '20px 24px 8px' }" :bordered="false">
          <div class="chart-card-header">
            <div class="meta">
              <span class="chart-card-title">公章使用数</span>
              <span class="chart-card-action">
                <slot name="action"></slot>
              </span>
              <a-tooltip title="指标说明" slot="action" style="margin-left: 60%">
                <a-icon type="info-circle-o"/>
              </a-tooltip>
            </div>
            <div class="total" style="color: #52c41a"><span>{{  chapterNum.toString() }}</span></div>
          </div>
          <div class="chart-card-content">
            <div class="content-fix">
              <slot></slot>
            </div>
          </div>
          <div class="chart-card-footer">
            <div class="field">
              <slot name="footer"></slot>
            </div>
          </div>
        </a-card>
      </a-col>

    </a-row>

    <a-row type="flex" justify="start" :gutter="3">
      <a-col :sm="24" :lg="12">
        <a-card>
          <div slot="title" class="index-md-title">
            <!--<img src="../../assets/daiban.png"/>-->
            我的待办【{{ dataSource.length }}】
          </div>
          <div slot="extra">
            <a v-if="dataSource && dataSource.length>0" slot="footer" @click="goPage">更多
              <a-icon type="double-right"/>
            </a>
          </div>
          <a-spin :spinning="loading">

            <a-table
              :class="'my-index-table tytable1'"
              ref="table1"
              size="small"
              rowKey="ID_"
              :columns="columns"
              :dataSource="dataSource"
              :pagination="false">
              <span slot="action" slot-scope="text, record">
                <a @click="open(record)">办理</a>
              </span>
            </a-table>
          </a-spin>

        </a-card>
      </a-col>

      <a-col :sm="24" :lg="12">
        <a-card>
          <div slot="title" class="index-md-title">
            <!--            <img src="../../assets/guaz.png"/>-->
            历史办理【{{ dataSource.length }}】
          </div>
          <a-table
            :class="'my-index-table tytable4'"
            ref="table4"
            size="small"
            rowKey="ID_"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="false">

            <span slot="action" slot-scope="text, record">
                <a>详情</a>
              </span>

          </a-table>
        </a-card>
      </a-col>

    </a-row>
    <!--办理-->
    <ru-task-handle ref="ruTaskandleForm"></ru-task-handle>

  </div>
</template>

<script>
  import { httpAction, postAction, getAction } from '@/api/manage'
  import RuTaskHandle from '../activiti/modules/RuTaskHandle'
  import ChartCard from '@/components/ChartCard'
  import Trend from '@/components/Trend'


  export default {
    name: 'Analysis',
    components: {
      RuTaskHandle,
      ChartCard,
      Trend

    },
    data() {
      return {
        loading: false,
        dataSource: [],


        //公章申请
        chapterNum: 0,
        //出差申请
        acteLeaveNum: 0,
        //请假申请
        leaveApplicationNum: 0,

        columns: [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function(t, r, index) {
              return parseInt(index) + 1
            }
          },
          {
            title: '申请事项',
            align: 'center',
            dataIndex: 'PNAME_'
          },
          {
            title: '申请人',
            align: 'center',
            dataIndex: 'INITATOR'
          },
          /*{
            title: '当前节点(待办人)',
            align: 'center',
            dataIndex: 'ASSIGNEE_'
          },
          {
            title: '当前任务',
            align: 'center',
            dataIndex: 'NAME_'
          },*/
          {
            title: '申请时间',
            align: 'center',
            dataIndex: 'CREATE_TIME_'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            scopedSlots: { customRender: 'action' }
          }
        ],


        url: {
          list: '/rutask/list'
        }


      }
    },
    created() {
      this.loadData()
      this.getTotal()

    },
    mounted() {
    },
    methods: {


      async getTotal() {
        //获取字典数组
        this.chapterNum = await getAction('/sys/common/getTotal', { table: 'acte_chapter' })
        this.acteLeaveNum = await getAction('/sys/common/getTotal', { table: 'acte_leave' })
        this.leaveApplicationNum = await getAction('/sys/common/getTotal', { table: 'acte_leave_application' })


      },

      loadData() {
        if (!this.url.list) {
          this.$message.error('请设置url.list属性!')
          return
        }
        var params//查询条件
        this.loading = true
        getAction(this.url.list, params).then((res) => {
          if (res.result = 'success') {
            this.dataSource = res.varList
            //this.ipagination.total = res.result.total;
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
          this.loading = false
        })
      },


      goPage() {
        //this.$message.success("请根据具体业务跳转页面")
        this.$router.push({ path: '/activiti/task' })
      },

      handleData() {
        this.$message.success('办理完成')
      },


      open(record) {
        this.$refs.ruTaskandleForm.open(record)
      }


    }
  }
</script>
<style lang="less" scoped>
  .chart-card-header {
    position: relative;
    overflow: hidden;
    width: 100%;

    .meta {
      position: relative;
      overflow: hidden;
      width: 100%;
      color: rgba(0, 0, 0, .45);
      font-size: 14px;
      line-height: 22px;
    }
  }

  .chart-card-action {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
  }

  .chart-card-footer {
    border-top: 1px solid #e8e8e8;
    padding-top: 9px;
    margin-top: 8px;

    > * {
      position: relative;
    }

    .field {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin: 0;
    }
  }

  .chart-card-content {
    margin-bottom: 12px;
    position: relative;
    height: 46px;
    width: 100%;

    .content-fix {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
    }
  }

  .total {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap;
    color: #000;
    margin-top: 4px;
    margin-bottom: 0;
    font-size: 30px;
    line-height: 38px;
    height: 38px;
  }
</style>


